<template>
  <div class="w-full">
    <div class="w-full" ref="poster"></div>
  </div>
</template>

<script>
import { encodePath } from "@/utils/utils.js";
import DengTaPng from "@/assets//dengta.png";
import { PosterDraw } from "./draw";
export default {
  name: "canvas-post",

  props: {
    nickName: {
      type: String,
      default: "",
    },
    avatarUrl: {
      type: String,
      default: DengTaPng,
    },
    title: {
      type: String,
      default: "24小时",
    },
    qrUrl: {
      type: String,
      default: "https://star.top237.top",
    },
  },
  data() {
    return {
      imgSrc: "",
      painting: {
        width: "230px",
        height: "320px",
        background: "#00D6F5",
        borderRadius: "10px",
        views: [
          {
            type: "image",
            url: this.avatarUrl, // https://7367-sgb-8gqmg7kv48722f4e-1306391227.tcb.qcloud.la/icon/dengta.png //  require('../../assets/dengta.png')
            css: {
              top: "20px",
              left: "90px",
              borderRadius: "40px",
              width: "50px",
              height: "50px",
            },
          },
          {
            type: "qrcode",
            content: this.qrUrl,
            css: {
              top: "170px",
              left: "50px",
              color: "#000",
              width: "130px",
              height: "130px",
            },
          },
          {
            type: "text",
            text: `${this.nickName}分享的歌单`,
            css: [
              {
                textAlign: "center",
                width: "210px",
                top: "100px",
                textDecoration: "",
                left: "10px",
                fontSize: "10px",
              },
            ],
          },
          {
            type: "text",
            text: this.title,
            css: [
              {
                textAlign: "center",
                width: "210px",
                top: "125px",
                textDecoration: "",
                left: "10px",
                fontSize: "10px",
              },
            ],
          },
        ],
      },
      posterDraw: null,
    };
  },
  mounted() {
    this.posterDraw = new PosterDraw({
      selector: this.$refs.poster,
      logoSrc: this.avatarUrl,
      title: this.title,
      qrUrl: this.qrUrl,
    });
  },

  methods: {
    encodePath,
    success(src) {
      this.imgSrc = src;
      this.$emit("cavasrc", src);
    },
    fail(err) {
      console.log("fail", err);
    },
  },
  watch: {
    qrUrl(val) {
      this.painting.views[1].content = val;
    },
    title(val) {
      this.painting.views[3].text = val;
    },
    nickName(val) {
      this.painting.views[2].text = val;
    },
    avatarUrl(val) {
      this.painting.views[1].url = val;
    },
  },
};
</script>

<style scoped></style>
